<template>
<div class="search">
    <header>
        <router-link to="/" slot="left">
            <mt-button icon="back"></mt-button>
        </router-link>
        <input type="text" placeholder="斗破苍穹" v-model="val" v-on:keydown.enter="send()" >
        <mt-button slot="right" v-on:click="send()" >搜索</mt-button>
    </header>
    <p>热门搜索</p>
    <div class="search-mian">
        <ul class="search-mian-a">
            <li>我被总裁黑上了！</li>
            <li>逆天邪神</li>
            <li>尊上</li>
        </ul>
       <ul class="search-mian-a">
            <li>我的v信是挂</li>
            <li>仙武帝尊</li>
            <li>万界先王</li>
        </ul>
        <ul class="search-mian-a">
            <li>末世女友：我家后院通末世</li>
            <li>系统逼我做皇后:潇衍录</li>
        </ul>
        <ul class="search-mian-a">
            <li>斗破苍穹之大主宰</li>
            <li>摩耶·人间玉</li>
        </ul>
    </div>
    <p>历史搜索</p>
    <div class="search-f">
        <ul>
            <li v-for="(item,index) in list">
                <p>{{item.con}}</p>
                <span v-on:click="del(index)">x</span>
            </li>
        </ul>
    </div>
</div>
</template>
<script>
  export default{
     data(){
         return{
            val:'',
            list:[
                    {
                        con:'斗破苍穹'
                    },
                    {
                        con:'斗罗大陆'
                    },
                    {
                        con:'穿越之xxxxx'
                    }
                    ]
                }},
     methods:{
        send(){
                if(this.val==''){
                   this.val="斗破苍穹"
                }else{
                    this.list.unshift({
                        con:this.val,
                    })
                this.val=''
                    }
                    },
        del(a){
            this.list.splice(a,1);
            }
  }
  }
  </script>
<style scoped>
.search header{
    display: flex;
    justify-content:space-between;

}
.mint-header{
    background: none;
}
.search .mint-button{
    background: none;
    color: #ff7830;
    font-size: 16px;
    border: none;

}
.search header input{
    margin: auto;
    height: 1.5rem;
    width: 68%;
    border: 1px solid #e8e8e8;
}
.search-mian .search-mian-a{
    padding: 0px;
    display:flex;
}
.search-mian .search-mian-a li{
    justify-content: flex-start;
    list-style: none;
    margin: 0.3rem;
    background: #f5f5f5;
    padding: 0.2rem;
    font-size: 10px;
}
.search-f li{
    font-size: 10px;
     list-style: none;
    display:flex;
     justify-content: space-between;
}
.search-f li p{
    width: 90%;
    margin-left: 0px;
    padding-left: 0px;
}
</style>